// 子表卡片化

.f-tmpl-subgrid-by-card {
    position: relative;
  
    .subgrid-by-card-item {
      padding: 12px 12px 10px 40px;
      border-bottom: 1px solid #E9E9E9;
      position: relative;
  
      &.f-state-edit {
        background: linear-gradient(270deg, rgba(235, 244, 255, 0.60) 0%, #EBF4FF 100%);
      }
  
      .card-item--order {
        position: absolute;
        top: 16px;
        left: 14px;
        border-radius: 2px;
        background: #51BD78;
        line-height: 1rem;
        color: #fff;
        font-size: 12px;
        text-align: center;
        padding: 0 2px;
        min-width: 16px;
      }
  
      .card-item--header {
        padding: 0;
        position: relative;
        margin: 0 0 8px;
  
        .card-item--toolbar {
          position: absolute;
          right: 0;
          top: 0;
  
        }
      }
  
      .card-item--title,
      .card-item--detail {
        font-size: 1rem;
      }
  
      .card-item--detail {
        font-size: 14px;
        padding: 0;
        color: rgba(0, 0, 0, 0.75);
  
        .card-item--item {
          margin-bottom: 4px;
        }
      }
    }
  }
  
  .f-tmpl-subgrid-by-card-list {
    .f-list-view-multiple {
      .f-list-select {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 0;
        bottom: 0;
  
        .custom-control {
          display: none;
        }
  
        &::before {
          position: absolute;
          font-size: 12px;
          content: '\e118';
          color: #fff;
          font-family: FarrisExtend;
          z-index: 100;
          right: 0;
          bottom: -3px;
        }
  
        &::after {
          content: '';
          width: 20px;
          height: 20px;
          border: 10px solid #fff;
          border-color: #fff #E6E6E6 #e6e6e6 #fff;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
  
      .f-listview-active {
        .subgrid-by-card-item {
          background: linear-gradient(270deg, rgba(235, 244, 255, 0.60) 0%, #EBF4FF 100%);
        }
  
        .f-list-select {
          &::after {
            border-color: #fff #63B7FF #63B7FF #fff;
          }
        }
      }
  
      .f-tmpl-subgrid-by-card:hover {
        .f-list-select {
          &::after {
            border-color: #fff #2A87FF #2A87FF #fff;
          }
        }
      }
    }
  
    .subgrid-by-card-footer {
      margin: 8px 0 0;
      border: 1px dashed #D9D9D9;
      height: 28px;
  
      .btn {
        display: block;
        text-align: center;
        width: 100%;
        height: 100%;
      }
    }
  }
  